<template>
  <div style="display: flex;align-items:center">
    <a-upload name="file" :show-upload-list="false" :customRequest="uploadFile">
      <a-button type="danger"> <a-icon :type="uploadStatus ? 'loading' : 'import'" /> 导入 </a-button>
    </a-upload>
    {{ fileName }}
  </div>
</template>

<script>
export default {
  name: 'ImportExcel',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadStatus: false,
      fileName: ''
    }
  },
  methods: {
    // 上传图片
    uploadFile(file) {
      console.log('file', file)
      this.fileName = file.file.name
      this.uploadStatus = true // 按钮状态
      const formData = new FormData()
      formData.append('file', file.file)
      this.$common
        .importExcel(this.url, formData)
        .then((data) => {
          console.log(data)
          if (data.code === 200) {
            this.$message.success(data.message)
          } else {
            this.$message.error(data.message)
          }
        })
        .finally(() => {
          this.uploadStatus = false
        })
    }
  }
}
</script>
